<template>
  <div class="dumplings-container">
    <!-- 商品列表 -->
    <div class="goods-list">
      <div class="goods-item" v-for="item in dumplingList" :key="item.id" @click="handleProductClick(item)">
        <!-- 商品图片区域 -->
        <div class="goods-image-container">
          <van-image :src="item.pic" :error-src="errorImage" class="goods-image" fit="cover" />
        </div>

        <!-- 商品信息区域 -->
        <div class="goods-info">
          <div class="goods-title van-ellipsis">{{ item.title }}</div>
          <div class="rating-sales">
            <van-rate v-model="item.rating" readonly size="10" color="#ff9f00" void-color="#e0e0e0" />
            <span class="sales-count">月售 {{ item.soldCount }}</span>
          </div>
          <div class="price-container">
            <div class="price">￥{{ formatPrice(item.price) }}</div>
            <div v-if="item.originalPrice" class="original-price">￥{{ formatPrice(item.originalPrice) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dumplingList: [
        {
          id: 31,
          title: "低脂全素套餐",
          pic: "/img/malatang1.jpg", // 修改为 public 目录下的 malatang1.jpg
          rating: 4.5,
          soldCount: 300,
          price: 15.00,
          originalPrice: 20.00
        },
		{
		  id: 32,
		  title: "老式东北黏糊麻辣烫",
		  pic: "/img/malatang2.jpg", // 修改为 public 目录下的 malatang1.jpg
		  rating: 3.5,
		  soldCount: 150,
		  price: 18.00,
		  originalPrice: 25.00
		},
		{
		  id: 33,
		  title: "杨国福6荤5素1主食",
		  pic: "/img/malatang3.jpg", // 修改为 public 目录下的 malatang1.jpg
		  rating: 4.5,
		  soldCount: 250,
		  price: 20.00,
		  originalPrice: 25.00
		},
		{
		  id: 34,
		  title: "7腌制鸡胸肉+小酥肉14种配菜",
		  pic: "/img/malatang4.jpg", // 修改为 public 目录下的 malatang1.jpg
		  rating: 3.5,
		  soldCount: 100,
		  price: 16.00,
		  originalPrice: 18.00
		},
		{
		  id: 35,
		  title: "单人香锅套餐",
		  pic: "/img/malatang5.jpg", // 修改为 public 目录下的 malatang1.jpg
		  rating: 4.5,
		  soldCount: 200,
		  price: 18.00,
		  originalPrice: 25.00
		},
		{
		  id: 36,
		  title: "东北老铁尝鲜套餐",
		  pic: "/img/malatang6.jpg", // 修改为 public 目录下的 malatang1.jpg
		  rating: 4.5,
		  soldCount: 200,
		  price: 23.00,
		  originalPrice: 32.00
		},
		{
		  id: 37,
		  title: "豪华单人套餐7荤8素含米饭",
		  pic: "/img/malatang7.jpg", // 修改为 public 目录下的 malatang1.jpg
		  rating: 4.5,
		  soldCount: 63,
		  price: 18.00,
		  originalPrice: 25.00
		},
		{
		  id: 38,
		  title: "川味毛血旺牛肉毛肚冒菜单人套餐",
		  pic: "/img/malatang8.jpg", // 修改为 public 目录下的 malatang1.jpg
		  rating: 4.5,
		  soldCount: 51,
		  price: 22.00,
		  originalPrice: 25.00
		},
        {
          id: 39,
          title: "豪华牛肉单人套餐",
          pic: "/img/malatang9.jpg", // 替换为实际图片链接
          rating: 3.2,
          soldCount: 24,
          price: 10.00,
          originalPrice: 5.00
        }
      ],
      errorImage: 'https://picsum.photos/300/300?text=图片加载失败',
    };
  },
methods: {
    formatPrice(price) {
      return price.toFixed(2);
    },
    // 处理商品点击（保存记录+跳转）
    handleProductClick(product) {
      // 保存到浏览记录
      this.saveToHistory(product);
      // 跳转到详情页
      this.goToProductDetail(product.id);
    },
    // 保存商品到浏览记录（与其他页面统一逻辑）
    saveToHistory(product) {
      // 从本地存储获取现有记录
      let historyList = JSON.parse(localStorage.getItem('historyHistory')) || [];
      
      // 提取统一格式的商品信息
      const historyItem = {
        id: product.id,
        title: product.title,
        pic: product.pic,
        price: product.price,
        browseTime: new Date().getTime() // 添加浏览时间戳
      };
      
      // 检查是否已存在该商品记录
      const existingIndex = historyList.findIndex(item => item.id === product.id);
      
      if (existingIndex !== -1) {
        // 已存在则更新时间
        historyList[existingIndex].browseTime = historyItem.browseTime;
      } else {
        // 不存在则添加到头部
        historyList.unshift(historyItem);
        // 限制最多保存20条记录
        if (historyList.length > 20) historyList.pop();
      }
      
      // 保存到本地存储
      localStorage.setItem('historyHistory', JSON.stringify(historyList));
    },
    // 跳转详情页
    goToProductDetail(id) {
      this.$router.push({
        name: 'productDetail',
        params: { id }
      });
    }
  }
};
</script>

<style scoped>
.goods-list {
  display: flex;
  flex-direction: column;
}

.goods-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.goods-image-container {
  flex: 0 0 120px;
  height: 120px;
  position: relative;
}

.goods-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  justify-content: space-between;
}

.goods-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  margin-bottom: 6px;
}

.rating-sales {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.sales-count {
  font-size: 12px;
  color: #666;
  margin-left: 8px;
}

.price-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #e53935;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  margin-left: 8px;
}
</style>